<template>
  <div>


    <!-- 搜索结果 -->
    <div class="search-result" v-if="searchForm.name">
      <el-tag
          type="info"
          size="small"
          closable
          @close="handleSearchClose"
      >
        搜索结果: "{{ searchForm.name }}"
      </el-tag>
    </div>

    <!-- 操作区域 -->
    <div class="operation-area">
      <div class="search-area">
        <el-form ref="searchForm" :model="searchForm" inline>
          <el-form-item label="商品名称" prop="name">
            <el-input
                v-model="searchForm.name"
                placeholder="请输入商品名称"
                clearable
                style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                @click="handleSearch"
                icon="el-icon-search"
            >
              搜索栏
            </el-button>
            <el-button @click="reset1Form" icon="el-icon-refresh-left">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>

    <!-- 商品列表 -->
    <el-table
        :data="listData"
        style="width: 100%"
        border
        class="goods-table"
    >
      <el-table-column
          type="index"
          label="序号"
          width="40"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="name"
          label="商品名称"
          min-width="60"
      ></el-table-column>
      <el-table-column
          prop="description"
          label="商品描述"
          min-width="150"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          prop="price"
          label="价格"
          width="100"
          align="center"
      ></el-table-column>
      <el-table-column label="商品图片" width="120" align="center">
        <template slot-scope="scope">
          <el-image
              style="width:90px; height: 90px;"
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
              fit="cover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="seller"
          label="卖家Id"
          min-width="20"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          prop="community"
          label="联系方式"
          min-width="50"
      ></el-table-column>
      <el-table-column
          prop="publicTime"
          label="发布日期"
          width="160"
          align="center"
      ></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              @click="editItem(scope.row)"
              class="edit-button"
          >
            编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="deleteItem(scope.row.id)"
              class="delete-button"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          @current-change="currentChange"
          @size-change="sizeChange"
          :page-size="pageInfo.pageSize"
          :current-page="pageInfo.pageNum"
          background
          layout="prev, pager, next, sizes, total"
          :page-sizes="[8, 16, 24, 32, 40, 48]"
          :total="total"
      ></el-pagination>
    </div>

    <!-- 发布商品弹窗 -->
    <el-dialog
        :title="form.id ? '编辑商品' : '发布商品'"
        :visible.sync="dialogVisible"
        width="500px"
        @close="resetForm"
        class="publish-dialog"
    >
      <el-form
          :model="form"
          ref="form"
          label-width="100px"
          class="publish-form"
      >
        <el-form-item
            label="商品名称"
            prop="name"
            :rules="[
            { required: true, message: '请输入商品名称', trigger: 'blur' }
          ]"
        >
          <el-input
              v-model="form.name"
              placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item
            label="商品描述"
            prop="description"
            :rules="[
            { required: true, message: '请输入商品描述', trigger: 'blur' }
          ]"
        >
          <el-input
              type="textarea"
              v-model="form.description"
              placeholder="请输入商品描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input
              v-model="form.price"
              placeholder="请输入价格"
              type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="community">
          <el-input
              v-model="form.community"
              placeholder="请输入联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item
            label="发布日期"
            prop="date"
            :rules="[
            { required: true, message: '请选择发布日期', trigger: 'change' }
          ]"
        >
          <el-date-picker
              v-model="form.date"
              type="date"
              placeholder="请选择发布日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="封面图">
          <el-upload
              style="text-align: center; padding-bottom: 10px"
              :action="$httpUploadFile"
              :show-file-list="false"
              :on-success="uploadImgSuccess"
              class="upload-demo"
          >
            <img
                v-if="form.img"
                :src="form.img"
                alt=""
                style="width: 150px; height: 150px; border-radius: 8px"
            />
            <i
                v-else
                class="el-icon-plus"
                style="
                font-size: 28px;
                width: 150px;
                height: 150px;
                line-height: 150px;
                text-align: center;
                border: 1px dashed #ccc;
                border-radius: 8px;
              "
            ></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit" class="submit-button">
            {{ form.id ? "更新商品" : "发布商品" }}
          </el-button>
          <el-button @click="resetForm" class="reset-button">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Utils from "@/utils/utils";

export default {
  name: "MyGoodsManage",
  data() {
    return {
      description: "",
      contactInfo: "",
      searchForm: {},
      dialogVisible: false,
      contactDialogVisible: false,
      searchQuery: "",
      total: 0,
      pageInfo: {
        pageNum: 1,
        pageSize: 8
      },
      form: {
        seller: Utils.getUserInfo().id
      },
      listData: []
    };
  },
  created() {
    this.getPageList();
  },
  methods: {
    submit() {
      if (!this.form.id) {
        this.$axios
            .post("/secondHandGoods/add", this.form)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getPageList();
                this.dialogVisible = false;
              }
            });
      } else {
        this.$axios
            .put("/secondHandGoods/update", this.form)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getPageList();
                this.dialogVisible = false;
              }
            });
      }
    },
    uploadImgSuccess(res) {
      this.$set(this.form, "img", res.data.url);
    },
    getPageList() {
      let data = Object.assign(this.searchForm, this.pageInfo);
      data.seller = Utils.getUserInfo().id;
      this.$axios
          .get("/secondHandGoods/page", {
            params: data
          })
          .then((res) => {
            this.listData = res.data.list;
            this.total = res.data.total;
          });
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.form.id = null;
    },
    currentChange(e) {
      this.pageInfo.pageNum = e;
      this.getPageList();
    },
    sizeChange(e) {
      this.pageInfo.pageSize = e;
      this.getPageList();
    },
    handleSearch() {
      this.pageInfo.pageNum = 1;
      this.getPageList();
    },
    reset1Form() {
      this.$refs["searchForm"].resetFields();
    },
    editItem(row) {
      this.form = {...row};
      this.dialogVisible = true;
    },
    deleteItem(id) {
      this.$confirm(
          "此操作将永久删除该商品, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
      )
          .then(() => {
            this.$axios
                .post("/secondHandGoods/delete", {id})
                .then((res) => {
                  if (res.code === 200) {
                    this.$message({
                      type: "success",
                      message: "删除成功!"
                    });
                    this.getPageList();
                  }
                });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
    },
    handleSearchClose() {
      this.searchForm.name = "";
      this.getPageList();
    }
  }
};
</script>

<style scoped>
:root {
  --primary-color: #409eff;
  --success-color: #67c23a;
  --danger-color: #f56c6c;
  --text-primary: #303133;
  --text-regular: #606266;
  --border-color: #ebeef5;
  --background-color: #f5f7fa;
  --card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell;
  color: var(--text-primary);
  background: var(--background-color);
  margin: 0;
  padding: 0;
}

.welcome-message {
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

.welcome-message h1 {
  font-family: "Arial", sans-serif;
  color: var(--text-primary);
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 600;
}

.welcome-message p {
  font-family: "Georgia", serif;
  color: var(--text-regular);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 0;
}

.operation-area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

.search-area {
  flex: 1;
}

.action-area {
  display: flex;
  align-items: center;
}

.publish-button {
  margin-left: 10px;
}

.search-result {
  margin-bottom: 20px;
  background: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

.goods-table {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background: #f8f9fa !important;
  font-weight: 600;
}

.el-table td {
  transition: background 0.3s ease;
}

.el-table .cell {
  padding: 12px 0;
}

.edit-button {
  margin-right: 10px;
}

.delete-button {
  margin-left: 10px;
}

.publish-dialog {
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

.publish-form {
  padding: 0 20px;
}

.submit-button {
  margin-right: 10px;
}

.reset-button {
  margin-left: 10px;
}

.upload-demo {
  text-align: center;
}
</style>